<template>
     

    <div class="container1">
        <div class="row1">
        <div id="content">
            <div class="top_banner">
                <img src="../assets/img/top.png" alt="" style="width: 301px;height: 100%;">
                <img src="../assets/img/title-1.png" alt="" style="width: 180px;height: 100%;">
            </div>
            <div class="form_list">
                <div>姓名<h5>*</h5><input type=text v-model="username"></div>
                <div>单位<h5>*</h5><input type=text v-model="unit"></div>
                <div>职务<input type=text v-model="position"></div>
                <div>电话<h5>*</h5><input type=text v-model="tel"></div>
            </div>
            <div class="form_list_1">
                <div class="form_list_1_title">标题<h5>*</h5></div>
                <div><textarea type='text' maxlength="600" placeholder="请填写信息（600字以内）" v-model="notes" class="form_list_1_textarea"></textarea></div>

            </div>
            <div style="display: flex;justify-content: center;margin: 20px 0;">
              <img src="../assets/img/button.png" alt="" style="width: 176px;height: 100%;" @click="submit()">
            </div>
       
    </div>
</div>
</div>




  </template>
  
  <script>
  import RadioView from '@/components/RadioView.vue';
  import CheckboxView from '@/components/CheckboxView.vue';
  import ShortanswerView from '@/components/Shortanswer.vue';
  import axios from 'axios'
  import service from '@/utils/request';
import { setTimeout } from 'core-js';
  export default {
  components: {   'radioview': RadioView,
    'checkboxview': CheckboxView,
    'shortanswerview':ShortanswerView,
   },
   beforeCreate: function () {
    // 执行在实例完全创建之前需要的操作
    var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) === 'micromessenger') {
    console.log('是微信浏览器1')
    return true;
  } else {
    console.log('不是微信浏览器1')
    return false;
  }

  },
    data(){
        return{
        username:'',
        unit:'',
        tel:'',
        position:'',
        notes:'',
        xd:[],
        obj1:{},
        datas:[],
        questionnaireId:'',
        imgurl:'',
        isLoading:true
        }
    },
    created() {
      this.datalist()
  },
  mounted(){
    setTimeout(()=>{
      this.isLoading=false
    },2000)
  },



    methods:{
        ontest(idx) {
          console.log(idx)
          this.xd=  this.xd.filter(item => item.questionId !== idx.questionId);
            this.xd.push(idx)
      // 将proxy对象转成 普通数组

            console.log(this.xd)
       },
       datalist:function(e=1){
          service.get('/prod-api/system/api/questionnaire/getQuestionnaire?questionnaireId=25').then(response => {    
            console.log(response)     
              this.datas=response.data.questionList
              this.questionnaireId=response.data.questionnaireId
              this.imgurl=response.data.imgUrl
        
            }).catch(function (error) {
                console.log(error);
            });
        },
        submit:function(){
          if(this.username==''){
            alert('请完整填写信息')
            return
          }
          if(this.unit==''){
            alert('请完整填写信息')
            return
          }
          if(this.tel==''){
            alert('请完整填写信息')
            return
          }
          if(this.notes==''){
            alert('请完整填写信息')
            return
          }

          let _temp=Date.now()
          console.log(_temp)
          this.obj1={userId:_temp,openid:'visitor'+_temp,questionnaireId:this.questionnaireId}
          this.obj1.result=[
          {'questionnaireId':this.questionnaireId,'questionId':143,'answerId':this.username},
            {'questionnaireId':this.questionnaireId,'questionId':144,'answerId':this.unit},
            {'questionnaireId':this.questionnaireId,'questionId':145,'answerId':this.position},
            {'questionnaireId':this.questionnaireId,'questionId':146,'answerId':this.tel},
            {'questionnaireId':this.questionnaireId,'questionId':147,'answerId':this.notes},
        ]
          console.log('=======',JSON.stringify(this.obj1))
          try {  
                  const response =  axios.post('/prod-api/system/api/questionnaire/setAnswers',this.obj1);  
                  response.then((msg)=>{
                    console.log(msg)
                    if(msg.data.code==200)
                  {
                    alert('提交成功')
                    window.location.href = 'http://h5.jlrbyy.cn/rs/index.html';
                  } 
                  else
                  {
                    alert('提交失败')
                  }
                  })
   
        
                  } catch (error) {  
                  console.error('Error sending POST request:', error);  
                  }  
       
}
    },   
    name: 'List',
    computed:{
        
}
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .form_list_1_textarea{
  width: 310px;
  height: 180px;
  border: 0;
  font-size: 14px;
  margin-top: 10px;
}
  .form_list_1_textarea:focus{
    outline: none;
  }
  .form_list{
    background-color: #fff;
    border-radius: 6px;
    height: 240px;
    padding:  0;
    border: 1px solid #fff;
  }
  .form_list_1{
    margin-top: 20px;
    background-color: #fff;
    border-radius: 6px;
    height: 240px;
    padding: 0;
    border: 1px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .form_list_1_title{
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #e5e5e5;
    width: 90%;
  }
  .form_list_1_title span{
    font-size: 14px;
    color: grey;
    line-height: 40px;
    margin-left: 20px;
  }
  .form_list div{
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    margin: 8px 25px;
    height: 50px;
    align-items: center;
  }

  h5{
    color: red;
  }
  .form_list div input{
   border: 0;
   width: 240px;
   font-size: 20px;
   padding-left: 10px;
  }
    .top_banner{
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .top_banner img{
        margin: 10px 0;
    }
  .row1{
    background-image: url(../assets/img/bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    z-index: 10;

    display: flex;
    justify-content: center;

  }
  .container1{

    background: linear-gradient(to bottom, #147DEC, #4fbcfd);
    display: flex;
    flex-direction: column;
    align-items: center;
  
  }
  #content{
    
    width: 335px;
  }
  </style>
  